<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 6.25rem;
            height: 6.25rem;
            background-color: #000;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 此时DOM树正在构建中,只能追加在script下面
        document.write('<h1>我是h1</h1>')
            // window.onload 是在渲染树渲染完,资源加载完成后触发,会替换body中全部内容
        window.onload = function() {
            document.write('<h1>我是h1</h1>')
        }

        // 时间线
        // 定义:在浏览器加载页面开始到这个页面加载完毕这个过程中,按顺序发生的每一件事情的总流程叫做时间线

        // 1.当有document对象时,就是js起作用了
        // 2.解析文档,构建DOM树 
        // document.readyState='loading'加载中
        // 3.如果遇到link开新的线程,异步加载css外部文件 style 构建CSSOM(Dom和CSSom是同时构建的)
        // 4.没有设置异步加载SCRIPT,阻塞文档解析,等待js脚本加载并且执行完成后,继续解析文档
        // 5.异步加载的SCRIPT,异步加载js脚本,如果是async就立即执行,不阻塞解析文档(不能使用 document.write())
        // 6.解析文档遇到img先解析这个节点,src=''创建加载线程,异步加载图片资源,不阻塞解析文档
        // 7.文档解析完成 文档解析完成是渲染树构建完成 
        // document.readyState='interactive'解析完成
        // 8.文档解析完成 defer Scrip js脚本开始按照顺序执行 
        // 9.文档解析完成:会触发DOMContentLoaded事件
        // 程序从同步的脚本执行阶段到事件驱动阶段
        // 10. async script加载并执行完毕,img等资源加载执行完毕,window对象中onload事件才触发
        // document.readyState='complete'加载完成
        console.log(document.readyState); //loading
        document.onreadystatechange = function(e) {
            console.log(document.readyState); //interactive    complete
        }
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOMcontentLoaded');
        })


        // 现代浏览器
        // 渲染引擎会尽快的把页面渲染
        // 一边解析一边构建Dom树一边构建渲染树,一边渲染
        // first paint

        // script放在下面有两方面原因:
        // 1.dom元素获取不到,需要使用window.onload
        // 2.现代浏览器,会一边解析,一边构建一边渲染,script会阻塞渲染,产生留白

        // DOMContentLoaded不存在句柄形式
        function domReady(fn) {
            if (document.addEventListener) {
                document.addEventListener('DOMContentLoaded', function() {
                    console.log('DOMcontentLoaded');
                    document.removeEventListener('DOMContentLoaded', arguments.callee, false)
                }, false)
            } else if (document.attachEvent) {
                document.attachEvent('onreadystatechange', function() {
                        //ie浏览器中interactive状态可能存在监听不到的情况
                        if (this.readyState === 'complete') {
                            document.attachEvent('onreadystatechange', arguments.callee);
                            fn();
                        }
                    })
                    // doScroll ie6,7之下的浏览器,文档没有解析完成doScroll会一直报错
                if (document.documentElement.doScroll && typeof(window.frameElement) === 'undefined') {
                    try {
                        document.documentElement.doScroll('left');
                    } catch (e) {
                        return setTimeout(arguments.callee, 20)
                    }
                    fn();
                }
            }
        }
    </script>
    <!-- 在使用异步的时候,尽量不要与DOM相关 -->
    <!-- 异步存在不确定因素 -->
    <!-- 不存在脚本依赖,不存在立即触发的情况下可以使用异步 -->
    <script src="./index.js" async></script>
    <script src="./index.js" defer></script>

</body>

</html>